<template>
	<div class="my_collect_main">
		<nav class="navbar fix">
			<div class="nav_item fl"><a href="javascript:;" @click='tabToggle("typeA");' v-bind:class="{active : (type == 'typeA')}"><span>商品</span></a></div>
			<div class="nav_item fl"><a href="javascript:;" @click='tabToggle("typeB");' v-bind:class="{active : (type == 'typeB')}"><span>商家</span></a></div>
		</nav>
		<div class="nav_container">
			<div class="nav_container_list" v-if="type == 'typeA'">
				<div class="commoditytype"></div>
				<ul class="commoditylist">
					<li class="commodityli fix" v-for="item in commodityList.goods.rows" :lang="item.spu" :en="item.sku">
						<img class="commodityhead fl" :src="item.imageUrl">
						<div class="commoditydescribe fl fix">
							<div class="commodityname fl">{{item.goodsName}}</div>
							<div class="commodityprice fl">￥{{item.shopPrice}}</div>
							<div class="commoditymarketprice fl">￥{{item.marketPrice}}</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="nav_container_list" v-if="type == 'typeB'">
				<div class="search fix"><img class="search_img fl" src="../assets/image/ico_seach@2x.png"><input class="search_input fl" type="text" placeholder="搜索全部商家"></div>
				<ul class="merchantlist">
					<li class="merchantli fix" v-for="item in storeList.rows" :id="item.id">
						<img class="merchanthead fl" :src="item.storeImg">
						<div class="merchantdescribe fl">
							<div class="merchantname">{{item.storeName}}</div>
							<div class="merchantnum">商品：{{item.goodsCount}}</div>
						</div>
						<img class="ismerchant fr" src="../assets/image/attention_press@2x.png" :lang="item.isfollow">
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
			type : 'typeA',
			commodityList:[],
			storeList:[],
			token: '',
			pageNo: 1,
			productList: '',
			pageCount: '',
			currentPage: '',
		}
	},
	mounted:function () {
		this.$nextTick(function () {
			this.getLocalStorage();
			this.mycollectView();
			window.addEventListener('scroll', this.loadMore);
		});
	},
	methods:{
		tabToggle:function(tabText){
			this.type= tabText;
		},
		getLocalStorage:function () {
			this.token = (window.localStorage.getItem('token') || '[]');
		},
		mycollectView:function () {
			var _this = this;
			// 收藏商品列表
			this.$http.post(Util.ajaxPath.devProductUrl+"shop-mms/mms/me/goodsFollow",{token: this.token, pageNo: this.pageNo,}, {emulateJSON:true}).then(function (res) {
				_this.commodityList = res.body.content;
				_this.productList = _this.commodityList.rows;
				_this.pageCount = _this.commodityList.pageCount;
				_this.currentPage = _this.commodityList.currentPage;
			});
			// 收藏商家列表
			this.$http.post(Util.ajaxPath.devProductUrl+"shop-mms/mms/me/storeFollow",{token: this.token, pageNo: this.pageNo,}, {emulateJSON:true}).then(function (res) {
				_this.storeList = res.body.content;
				_this.productList = _this.storeList.rows;
				_this.pageCount = _this.storeList.pageCount;
				_this.currentPage = _this.storeList.currentPage;
			});
		},
		loadMore:function () {
			var _this= this;
			var scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			var conHeight = (document.documentElement.clientHeight)*(this.currentPage) -90;
			if(scrolled > conHeight && this.currentPage < this.pageCount){
				_this.pageNo++;
					// 收藏商家列表
					this.$http.post(Util.ajaxPath.devProductUrl+"shop-mms/mms/me/storeFollow",{token: this.token, pageNo: this.pageNo}, {emulateJSON:true}).then(function (res) {
					for(var i=0; i<res.body.content.rows.length; i++){
						_this.productList.push(res.body.content.rows[i]);
					}
				});
			}
		}
	}
}
</script>
<style lang="scss">
.my_collect_main{
	.navbar{
		padding: 0 2.21rem; width: 3.08rem; height: 0.88rem; background: #fff; border-bottom: 1px solid #f4f5f5; position: fixed; left: 0; top: 0; z-index: 10;
		.nav_item{
			width: 50%; position: relative;
			a{ display: block; width: 100%; height: 0.86rem; }
			span{ display: block; margin: 0 auto; width: 0.78rem; height: 0.86rem; line-height: 0.88rem; text-align: center; font-size: 0.36rem; color: #333; }
		}
		.active{
			span{ border-bottom: 0.02rem solid #ff365d; color: #ff365d; }
		}
	}
	.nav_container{ padding-top: 0.88rem; }
	.commoditytype{ margin-bottom: 0.18rem; height: 0.62rem; background: #fff; }
	.commoditylist{ background: #fff; }
	.commodityli{ padding: 0.15rem 0.3rem; height: 1.8rem; border-bottom: 1px solid #f4f5f5; }
	.commodityhead{ display: block; width: 1.8rem; height: 1.8rem; }
	.commoditydescribe{ padding-left: 0.34rem; width: 4.66rem; }
	.commodityname{ padding-top: 0.2rem; width: 4.66rem; height: 0.6rem; line-height: 0.3rem; font-size: 0.26rem; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
	.commodityprice{ padding-top: 0.6rem; line-height: 0.32rem; font-size: 0.32rem; color: #ff365d; }
	.commoditymarketprice{ padding: 0.66rem 0 0 0.26rem; line-height: 0.24rem; font-size: 0.24rem; color: #999; text-decoration: line-through; }
	.search{ margin: 0.15rem auto; width: 7rem; height: 0.62rem; background: #fff; border-radius: 0.06rem; }
	.search_img{ padding: 0.17rem 0.16rem 0 0.18rem; width: 0.28rem; height: 0.28rem; }
	.search_input{ line-height: 0.62rem; font-size: 0.26rem; color: #aaa; border: none; outline: medium; }
	.merchantlist{ background: #fff; }
	.merchantli{ margin-bottom: 1px; padding: 0 0.3rem; height: 1.3rem; }
	.merchanthead{ display: block; margin-top: 0.24rem; width: 0.8rem; height: 0.8rem; border: 1px solid #ddd; border-radius: 0.4rem; }
	.merchantdescribe{}
	.merchantname{ padding: 0.3rem 0 0 0.3rem; height: 0.3rem; line-height: 0.3rem; font-size: 0.3rem; color: #151517; }
	.merchantnum{ padding: 0.16rem 0 0 0.3rem; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #666; }
	.ismerchant{ padding-top: 0.44rem; width: 0.88rem; height: 0.4rem; }
}
</style>